<template>
  <div>
    <!-- <a-row>
        <a-col :span="24">
          <a-form
            layout="inline"
            :form="form"
            style="margin-left:10px"
            @submit="handleSubmit"
          >
            <a-form-item label="颜色编号">
              <a-input
                allow-clear
                placeholder="请输入颜色编号"
                v-model="colorCode"
              ></a-input>
            </a-form-item>
            <a-form-item label="销售色">
              <a-input
                allow-clear
                placeholder="请输入销售色"
                v-model="colorName"
              ></a-input>
            </a-form-item>
            <a-form-item>
              <a-button
                type="primary"
                html-type="submit"
              >搜索</a-button>
            </a-form-item>
          </a-form>
        </a-col>
      </a-row> -->
    <a-table bordered :columns="shop" :pagination="false" style="margin-top:20px"
      :data-source="searchList.length || showSearch ? searchList : newGroupList">
      <template slot="sccf" slot-scope="text, record">
        <a-select v-model="record.sccf" placeholder="请选择物料成分" style="margin: -5px 0;width:200px" show-search
          :filterOption="filterOption">
          <a-select-option v-for="(item) in typeList" :key="item.code" :value="item.code" :title="item.name">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </template>
      <template slot="sccfbl" slot-scope="text, record">
        <a-input style="margin: -5px 0;width:200px" v-model="record.sccfbl" type="number" class="inputRight" suffix="%" />
      </template>

      <template slot="action" slot-scope="txt, record,i">

        <a-popconfirm :title="`确定要删除该项吗?`" @confirm="deleteGroup(record)">
          <a class="mr-10">
            删除
          </a>
        </a-popconfirm>
      </template>
    </a-table>
    <a-button type="dashed" style="width: 50%;margin-top: 20px;" @click="add">
      <a-icon type="plus" />添加成分
    </a-button>
    <a-button type="dashed" style="width: 50%;margin-top: 20px;" @click="save">
      保存
    </a-button>
  </div>
</template>
<script>
import { sampleGroupDelete, getDictChildList, sampleGroupAdd, sampleGroupUpdate } from '@api/material/index'

const shop = [
  {
    title: '序号',
    dataIndex: 'rowno'
  },
  {
    title: '成分',
    dataIndex: 'sccf',
    scopedSlots: { customRender: 'sccf' }
  },
  {
    title: '占比',
    dataIndex: 'sccfbl',
    scopedSlots: { customRender: 'sccfbl' }
  },
  {
    title: '操作',
    width: 100,
    scopedSlots: { customRender: 'action' }
  }
]
export default {
  props: {
    groupList: {
      type: Array,
      default: null
    },
    sccode: {
      type: String,
      default: null,
      required: false,
    },
    patternCode: {
      type: String,
      default: null,
      required: false,
    },
  },
  data() {
    return {
      shop,
      colorCode: '',
      colorName: '',
      form: this.$form.createForm(this),
      newsupplyList: [],
      maxSeq: 0,
      focusvalue: '',
      searchList: [],
      typeList: [],
      showColor: false,
      showSearch: false,
      colorDetail: {},
      colorIndex: null,
      showDelete: true,
      newGroupList: [],
      form: {
        rowno: 0,
        sccf: undefined,
        sccfbl: '',
        sccode: ""
      }
    }
  },
  watch: {
    groupList(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.newGroupList = newVal
      }
    },
    sccode(newVal, oldVal) {
      if (newVal && newVal !== oldVal) {
        this.form.sccode = newVal
      }
    },
  },
  computed: {
    userInfo() {
      return this.$store.getters.userInfo || null
    }
  },

  mounted() {
    this.getDictChildList()
  },
  methods: {
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    async getDictChildList() {
      const params = {
        name: 'PRODUCT_COMPONENT',
      }
      try {
        const res = await getDictChildList(params)
        if (res.code == 200) {
          this.typeList = res.data
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('获取面料要求列表失败！')
          }
        }
      } catch (error) {
        this.$message.error('获取面料要求列表失败！')
      }
    },
    add() {
      if (this.newGroupList.length) {
        
        const list = []
        this.newGroupList.map(item => {
          list.push(item.rowno)
        })
        const obj = JSON.parse(JSON.stringify(this.form))
        obj.rowno = Math.max.apply(null, list) + 1
        console.log(obj);
        this.newGroupList.push(obj)
      } else {
        this.newGroupList.push(this.form)
      }
      console.log(this.newGroupList);
    },
    onFocus(e) {
      this.focusvalue = e.target.value
    },
    async save() {
      this.newGroupList.map((item) => {
        if (!item.sccode) {
          item.sccode = this.sccode
        }
      })
      const params = this.newGroupList
      console.log(this.groupList,params);
      const res =  this.groupList && this.groupList.length ? await sampleGroupUpdate(params): await sampleGroupAdd(params)
          if (res.code == 200) {
            this.$message.success('保存成功！')
            this.$emit('changegroup')
          } else {
            if (res.msg) {
              this.$message.error(res.msg)
            } else {
              this.$message.error('保存失败！')
            }
          }

    },
    handleSubmit(e) {
      e.preventDefault()
      this.searchList = []
      this.showSearch = false
      if (this.colorCode && !this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (!this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if (this.colorCode && this.colorName) {
        this.colorList.map((item, i) => {
          if (item.colorName.indexOf(this.colorName) >= 0 && item.colorCode.indexOf(this.colorCode) >= 0) {
            const obj = item
            item.index = i
            this.searchList.push(obj)
          }
        })
      }
      if ((this.colorCode || this.colorName) && !this.searchList.length) {
        this.showSearch = true
      }
    },
    async deleteGroup(record) {
      const res = await sampleGroupDelete(record)
      if (res.code == 200) {
        this.$message.success('删除成功！')
        this.$emit('changegroup')
      } else {
        if (res.msg) {
          this.$message.error(res.msg)
        } else {
          this.$message.error('删除失败！')
        }
      }
    },

    closeColor() {
      this.showColor = false
      this.$emit('changeColor')
    }
  }
}
</script>
